<template>
	<view>
		<uni-popup mode="center" ref="popupRef" @change="change">
			<view style="width: 85vw;border-radius: 40rpx;position: relative;margin-bottom: 300rpx;">
				<image src="/static/img/loadBg.png" class="load-top" mode="aspectFit"></image>
				<view style="border-bottom-left-radius: 40rpx;border-bottom-right-radius: 40rpx;box-sizing: border-box;width: 85vw;padding: 0 52rpx;background-color: #fff;position: absolute;top: 450rpx;">
					<template v-if="downLoad=='notStart'">
						<view style="font-weight: 600;font-size: 30rpx;color: #000000;margin-bottom: 20rpx;">新版本升级</view>
						<view style="margin-bottom: 60rpx;line-height: 60rpx;">
							<u-parse :content="appcontent"></u-parse>
						</view>
						<view style="display: flex;grid-gap:40rpx;text-align: center;">
							<view style="color: #BBBBBB;flex: 1;background: #F3F3F3;border-radius: 38rpx;line-height: 76rpx;font-size: 30rpx;" @click="handleCancleUpdate">取 消</view>
							<view class="update" @click="handleUpdate">立即更新</view>
						</view>
					</template>
					<template v-else>
						<view style="font-weight: 600;font-size: 30rpx;color: #000000;margin-bottom: 20rpx;">{{downLoad=='start'?'下载中':'下载完成'}}</view>
						<view style="margin-top: 60rpx;">
							<u-line-progress :active-color="'#F169F6'" :percentage="percentage" height="10">
								<view class="circle"></view>
							</u-line-progress>
						</view>
						<!-- <view class="update" style="margin-top: 100rpx;text-align: center;" @click="handleInstall">安装</view> -->
					</template>
					<view :style="downLoad=='notStart'?'height: 40rpx;':'height: 120rpx;'"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default {
		name: "updateApp",
		data() {
			return {
				show: false,
				file: '',
				downLoad: 'notStart', //'notStart' | 'start' | 'end'
				percentage: 0,
				appPackage: '',
				appcontent: ''
			};
		},
		mounted() {
			// this.$refs.popupRef.open()
			this.plus()
		},
		methods: {
			compareVersion(version1, version2) {
				const arr1 = version1.split('.');
				const arr2 = version2.split('.');
				const len = Math.max(arr1.length, arr2.length);
				// 调整两个版本号位数相同
				while (arr1.length < len) {
					arr1.push('0');
				}
				while (arr2.length < len) {
					arr2.push('0');
				}
				// 循环判断每位数的大小
				for (let i = 0; i < len; i++) {
					const num1 = parseInt(arr1[i]);
					const num2 = parseInt(arr2[i]);
					if (num1 > num2) {
						return 1;
					} else if (num1 < num2) {
						return -1;
					}
				}
				return 0;
			},
			//点击安装
			handleInstall() {
				if (this.percentage === 100) {
					plus.runtime.install(this.appPackage, {
						force: false
					}, (fileRes) => {}, (e) => {})
				} else {
					uni.showToast({
						title: '下载未完成',
						icon: 'none'
					})
				}
			},
			change(e) {
				this.show = e.show
				if (!this.show) {
					setTimeout(() => {
						this.file = ''
						this.downLoad = 'noStart'
						this.percentage = 0
						this.appPackage = ''
						this.appcontent = ''
					}, 300)
				}
			},
			handleUpdate() {
				this.downloadFile(this.file)
			},
			handleCancleUpdate() {
				this.$refs.popupRef.close()
			},
			open() {
				this.$refs.popupRef.open()
			},
			//检查是否有更新 
			plus() {
				
				this.$Api['common'].getApplicationVersionLatest().then(res => {
					const data = res.data;
					const app = getApp()
					app.globalData.one_divide_rate = data.one_divide_rate || 0
					app.globalData.two_divide_rate = data.two_divide_rate || 0
					// #ifdef APP
					plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
						if (this.compareVersion(data.version, widgetInfo.version) === 1) {
							this.$refs.popupRef.open()
							this.file = data.apppackage
							this.appcontent = data.appcontent
						}
					});
					// #endif
				}).catch(err => {
					console.log(err)
				});
			},
			downloadFile(filePath) {
				this.downLoad = 'start'
				const downloadTask = uni.downloadFile({
					url: encodeURI(filePath),
					success: (downloadResult) => {
						if (downloadResult.statusCode == 200) {
							this.appPackage = downloadResult.tempFilePath
							plus.runtime.install(downloadResult.tempFilePath, {
								force: true
							}, (fileRes) => {}, (e) => {})
						} else {
							uni.showToast({
								title: '更新失败',
								icon: 'none'
							})
							setTimeout(() => {
								this.$refs.popupRef.close()
							}, 1000)
						}
					},
					fail: () => {
						uni.showToast({
							title: '更新失败',
							icon: 'none'
						})
						setTimeout(() => {
							this.$refs.popupRef.close()
						}, 1000)
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.percentage = res.progress
					if (this.percentage == 100) {
						this.downLoad = 'end'
					}
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	::v-deep .u-line-progress {
		overflow: visible !important;
	}

	.circle {
		position: absolute;
		right: 0;
		border-radius: 24rpx;
		width: 24rpx;
		height: 24rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(241, 105, 246, 0.3);
		border: 4rpx solid #F169F6;
		z-index: 100;
	}

	.update {
		font-size: 30rpx;
		color: #fff;
		line-height: 76rpx;
		flex: 1;
		background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
		box-shadow: 0rpx 4rpx 10rpx 0rpx #FDC4FF;
		border-radius: 38rpx;
	}
</style>